<template>
  <div class="apply-container">
    <header class="drag">
      <span class="title">{{title}}</span>
    </header>
    <ul class="main-container">
      <li v-if="type != 1">
        <span class="title">发送添加朋友申请</span>
        <textarea  v-model.trim="form.applyInfo" class="input" rows="4" style="resize: none;outline: green"> </textarea>
      </li>
      <li>
        <span class="title">备注</span>
        <input class="input" v-model.trim="form.remark" style="height: 45px" :placeholder="form.remarkBac" type="text">
      </li>

      <li>
        <span class="title">朋友权限</span>
        <div class="selector-container">
          <div class="selector" @click="form.friendPermission = 1">
            <div>
            <span>
               聊天、朋友圈、微信运动等
            </span>
            </div>
            <el-icon  v-if="form.friendPermission === 1" class="icon"><Select /></el-icon>
          </div>

          <div class="selector" @click="form.friendPermission = 2">
            <div>
            <span>
               仅聊天
            </span>
            </div>
            <el-icon v-if="form.friendPermission === 2"  class="icon"><Select /></el-icon>
          </div>
        </div>

      </li>

      <li class="">
        <span class="title">朋友圈和状态</span>
        <div  class="selector-container friend">
          <div class="selector">
            <div>
            <span>
               不让他（她）看
            </span>
            </div>
            <el-switch v-model="form.notSee" class="ml-2" size="" />
          </div>

          <div  class="selector">
            <div>
            <span>
               不看他（她）
            </span>
            </div>
            <el-switch v-model="form.seeNot" class="ml-2" size="" />
          </div>

        </div>

      </li>
      <li style="align-items: center">
        <div>
          <el-button style="width: 95px;height: 30px;background-color: rgb(7, 193, 96)" @click="handleApply" type="success">确定</el-button>
          <el-button style="width: 95px;height: 30px;margin-left: 5px"  @click="handleCancel">取消</el-button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {useUserStore} from '@/stores/user'
import { onBeforeMount, ref } from 'vue'
import { Select } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { applyContact, handleContactApply, searchUser } from '../../../api/user'
import { ElMessage } from 'element-plus'


const userStore = useUserStore()
const route = useRoute()

const contact = ref({})

onBeforeMount(async () => {
  if (!userStore.email) {
    await userStore.userInfo()
  }

  searchUser(route.params.uid).then(res => {
    if (res.code === 200) {
      console.log(res.data)
      contact.value = res.data
      form.value.remarkBac = contact.value.nickname

    }
  })


  form.value.applyInfo = `我是${userStore.nickname}`
  form.value.applyId =  userStore.uid
})

const title = ref(route.params.type == 1? '通过朋友验证' : '申请添加朋友')

const type = route.params.type

const form = ref({
  applyInfo: '',
  friendPermission: 1,
  remark: '',
  targetId: route.params.uid,
  applyId: '',
  contactType: 0,
})

// 点击取消时
const handleCancel = () => {
  window.ipcRenderer.send('operateWindow' , 'close')
}

// 点击申请时
const handleApply = () => {
  if (!form.value.remark) {
    form.value.remark = form.value.remarkBac
  }

  if ( type == 1) {


    handleContactApply({
      applyId: route.params.uid,
      status: 1,
      remark: form.value.remark,
    }).then(res => {
      if (res.code === 200) {
        window.ipcRenderer.invoke('init-session' ,
          {...contact.value , userId: userStore.uid ,remark: form.value.remark , status: 1, type: 1 , friendPermission: form.value.friendPermission})
      } else {
        ElMessage.error({message: res.message , type: 'error' , plain: true})
      }
    })

  } else {
    if (!form.value.applyInfo) {
      ElMessage.error('请填写申请详情')
      return
    }


    form.value.status = 0

    form.value.source = '账号搜索添加'
    window.ipcRenderer.invoke('save-contact' , {...form.value , contactInfo: {...contact.value}})
      .then(res => {
        if (res.code === 200) {

        } else {
          this.$message({message:res.message, type: 'error' , plain: true})
        }
        console.log('res' , res)
      })
    applyContact(form.value).then(res => {
      if (res.code === 200) {
        window.ipcRenderer.send('operateWindow' , 'close')
      }
    })
  }







}

</script>



<style scoped lang="less">
.apply-container {
  color: black;
  background-color: rgb(247, 247, 247);
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
  }

  .main-container {
    padding: 0 30px;
    display: flex;
    flex-direction: column;

    li:hover {
      cursor: pointer;
    }

    li {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      //border-radius: 10px;
      //overflow: hidden;

      .input {
        border: 2px solid rgb(237, 237, 237);
        transition: 0.3s;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        font-size: 14px;
        padding-left: 15px;
        outline: none;
      }

      .input:focus {
        box-shadow: 0 0 1px rgb(7, 193, 96); /* 可选：加上发光效果 */
        border: 2px solid rgb(7, 193, 96);
      }

      .input::placeholder {
        color: rgb(172, 172, 172);
      }

      .title {
        color: rgb(158, 158, 158);
        font-size: 12px;
        margin-bottom: 8px;
        margin-left: 10px;

      }


      .selector-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: white;
        border: 2px solid rgb(237, 237, 237);
        border-radius: 8px;
        padding: 0 20px;

        .selector {
          font-size: 13px;
          padding: 10px 0;
          padding-right: 5px;
          border-bottom: 1px solid rgb(237, 237, 237);
          display: flex;
          justify-content: space-between;
          align-items: center;


          .icon {
            color: rgb(7, 193, 96);
            font-size: 16px;
          }

        }

      }

      .friend{
        .selector {
          padding: 3px 0;
        }
      }


    }


  }
}
</style>
